<template>
  <el-select
    v-model="selectedValue"
    :placeholder="placeholder"
    :disabled="disabled"
    clearable
    @change="handleChange"
  >
    <el-option
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    />
  </el-select>
</template>

<script setup lang="ts">
import DictAPI from '@/api/dict'

const props = defineProps({
  /**
   * 字典编码(eg: 性别-gender)
   */
  code: {
    type: String,
    required: true
  },
  modelValue: {
    type: [String, Number]
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:modelValue'])

const options: Ref<OptionType[]> = ref([])

const selectedValue = ref<string | number | undefined>()

watch([options, () => props.modelValue], ([newOptions, newModelValue]) => {
  if (newOptions.length === 0) {
    // 下拉数据源加载未完成不回显
    return
  }
  if (newModelValue == undefined) {
    selectedValue.value = undefined
    return
  }
  if (typeof newOptions[0].value === 'number') {
    selectedValue.value = Number(newModelValue)
  } else if (typeof newOptions[0].value === 'string') {
    selectedValue.value = String(newModelValue)
  } else {
    selectedValue.value = newModelValue
  }
})

function handleChange(val?: string | number | undefined) {
  emits('update:modelValue', val)
}

onBeforeMount(() => {
  // 根据字典编码获取字典项
  DictAPI.getOptions(props.code).then((data) => {
    options.value = data
  })
})
</script>
